<!-- 难题咨询详情  -->
<template>
	<div class="collect-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<div class="collect">
			<div class="collect-item">
				<div class="collect-info">
					<van-row type="flex" justify="space-between"  @load="onLoad">
						<van-col span="3">
							<div class="author-headpic">
								<van-image width="100%" height="100%" :src="problem.HeadPic">
								</van-image>
							</div>
						</van-col>
						<van-col span="16">
							<div class="author-name">
								<!--{{'池呆呆'}}-->
								{{problem.RealName}}
							</div>
							<div class="collect-time">
								{{problem.AddTime}}
							</div>
						</van-col>
						<van-col span="4">
							<div class="money">
								<!--理财-->
								{{problem.ClassName}}
							</div>
						</van-col>
					</van-row>
				</div>
				<!--@click="goProblemDetail"-->
				<div :class="'article-info ' + 'article-info-article'" >
					<div class="article-title limit-one-line">
						<!--当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案-->
						{{problem.Title}}
					</div>
					<div class="article-synopsis limit-two-line">
						<!--当前作品具体内容文案当前作品具体内容文案当前作品当前作品具体内容文案当前作品具体内容文案当前作-->
						{{problem.Remark}}
					</div>
				</div>
			</div>
			<div class="collect-item">
				<div class="collect-info">
					专业回答：
				</div>
				<!--@click="goProblemDetail"-->
				<div v-if="answerStatus" :class="'article-info ' + 'article-info-article'" >
					<div class="article-synopsis limit-two-line">
						{{problem.AuditRemark}}
						<!--当前作品具体内容文案当前作品具体内容文案当前作品当前作品具体内容文案当前-->
					</div>
				</div>
				<div  v-if="!answerStatus" class="collect-info collect-info-empty">
					暂无回答
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import NavBar from '../../components/NavBar.vue';

	import {
		myProblem_api
	} from '../../api/index.js'

	export default {	
		name: 'problem-detail',
		components: {
			NavBar
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,
				answerStatus:false,
				title: '详情',
				isCollect: true,
				problem:'',
				list: []
			}
		},
		mounted:function(){
			this.onLoad();//需要触发的函数
		},
		methods: {
			onLoad() {
				this.getProblemDetail();
			},
			activated() {
				this.getProblemDetail(false)
			},
			getProblemDetail(is_push = true) {
				this.refreshing = false
				let data = {
					id: this.$route.query.id
				}
				myProblem_api.getProblemDetail(data, (res) => {
					this.problem = res
					if(res.AuditPerson!=''){
						this.answerStatus= true;
					}
					console.info(this.answerStatus)
					this.finished = true //已全部加载
				})
			}
		}
	}
</script>

<style scoped>
	.collect-panel {
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.collect {
		min-height: calc(100vh - 0.88rem);
		padding-top: 0.1rem;
	}

	.collect-item {
		background-color: #FFFFFF;
		margin: 0 0 0.1rem;
		padding-top: 0.36rem;
	}

	.collect-info {
		padding: 0 0.2rem;
		height: 0.76rem;
		color:#FE4B4B;
	}
	.collect-info-empty{
		color:#666 !important;
	}
	.author-headpic {
		width: 0.76rem;
		height: 0.76rem;
		margin: 0 auto;
	}

	.author-name {
		padding-left: 0.2rem;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 0.4rem;
	}

	.collect-time {
		padding-left: 0.2rem;
		height: 0.38rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8D8D8D;
		line-height: 0.38rem;
	}

	.article-info {
		padding: 0.2rem 0.28rem 0.2rem;
		text-align: left;
	}
	
	.article-info-article{
		padding-bottom: 0.3rem;
	}

	.article-title {
		height: 0.7rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.7rem;
	}

	.article-synopsis {
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
	}

	.article-accessory {
		width: 6.4rem;
		height: 1.12rem;
		margin-top: 0.2rem;
		background: #F8F8F8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
		
	.article-accessory-look{
		width: 6.96rem;
	}

	.article-type {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0.6rem;
		min-height: 0.6rem;
		margin-left: 0.24rem;
	}
	
	.article-attribute-box{
		width: 60%;
		margin-left: 0.2rem;
	}
	.article-name{
		height: 0.56rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.56rem;
	}
	.article-attribute{
		height: 0.28rem;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		line-height: 0.28rem;
	}
	.article-look{
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE4B4B;
		line-height: 0.4rem;
		margin: 0 auto;
	}
	.money{
		color: #8A8A8A;
		background-color: #EDEDED;
		text-align: center;
		font-size: 0.25rem;
		height: 0.38rem;
		line-height: 0.38rem;
	}
	.goContribute {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		margin-bottom: 0.4rem;
	}
	.btn{
		width:2.9rem !important;
	}
	.prem-btn{
		color: #FE4B4B;
		background-color: #fff;
		border-radius: 0.1rem;
		border: 1px solid #FE4B4B;
	}
</style>
